<template>
	<!-- 详情 -->
	<div id="" style="text-align: left;">
		<van-row id="contents">
			<van-col span="4" @click="goback">
				<van-icon name="arrow-left" size="20" />
			</van-col>
			<van-col span="4" offset="16">
				<van-icon name="play" style="margin-right: 1vw;" size="20" />
				<van-icon name="wap-nav" size="20" @click="gobottom" />
				<van-popup v-model="show" round position="bottom" :style="{ height: '20%' }">
					<van-row style="margin-top: 2vh;">
						<van-col span="5" offset="10">分享至</van-col>
					</van-row>
					<van-row style="text-align: center;margin-top: 6vh;" id="tan">
						<van-col span="8"><img src="../../../public/微信.png"></van-col>
						<van-col span="8"><img src="../../../public/微博.png"></van-col>
						<van-col span="8"><img src="../../../public/QQ.png"></van-col>
					</van-row>
				</van-popup>
			</van-col>
		</van-row>
		<div id="" style="width: 100vw;height: 40vh;">
			<van-swipe @change="onChange" :autoplay="1000">
				<van-swipe-item v-for="(item,index) in xq"><img v-lazy="url+item.image_url" style="width: 100vw;height: 40vh;box-shadow: 2px 2px 2px 2px #f1f1f1;
		border-radius: 10px;margin-top: 1vh;"></van-swipe-item>
				<template #indicator>
					<div class="custom-indicator">{{ current + 1 }}/5</div>
				</template>
			</van-swipe>
		</div>
		<div id="" style="color: orangered;margin-top: 2vh;font-size: 0.1rem;">
			￥<span style="font-size: 0.5rem;font-weight: bold;">{{xqy.shop_price}}</span>
			<span @click="collect()" style="width: 20vw;margin-left: 65vw;" v-if="star"><img
					src="../../../public/收藏.png" style="width: 6vw;height: 3vh;"></span>
			<span @click="collect()" style="width: 20vw;margin-left: 65vw;" v-else><img src="../../../public/收藏1.png"
					style="width: 6vw;height: 3vh;"></span>
		</div>
		<div class="name">
			{{xqy.goods_name}} &nbsp;
			{{xqy.goods_sn}}
		</div>
		<div class="shop_detail">
			{{xqy.goods_remark}}
		</div>
		<div class="sales">
			<div>
				浏览次数：{{xqy.click_count}}
			</div>
			<div>
				库存：{{xqy.store_count}}
			</div>
		</div>
		<div class="sales">
			<div>
				销售量：{{xqy.sales_sum}}
			</div>
			<div>
				总评论：{{xqy.comment_count}}
			</div>
		</div>
		<div id="" style="font-size: 20px;font-weight: bold;margin-top: 2vh;">
			{{xqy.goods_remark}}
		</div>
		<div class="fd">
			<div class="box" v-html="message"></div>
		</div>

		<div id="" style="width: 100vw;height: 7vh;">

		</div>
		<div id="">
			<van-goods-action>
				<van-goods-action-icon icon="chat-o" text="客服" color="#FE856A" />
				<van-goods-action-icon icon="shop-o" text="店铺" color="#FE856A" />
				<van-goods-action-button color="#FE856A" type="warning" text="加入购物车" @click="addcart" />
				<van-goods-action-button color="#F5932A" type="danger" text="立即购买" />
			</van-goods-action>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		Toast
	} from 'vant';
	export default {
		computed: {
			...mapGetters([
				'collectList'
			])
		},
		data() {
			return {
				xq: [],
				xqy: {},
				url: '',
				current: 0,
				message: '',
				goods_id: '',
				show: false,
				// collArr: [],
				star: true,
				// id: '',
				// collectList: [],
			}
		},

		created() {
			const userInfo = JSON.parse(localStorage.getItem('login'))
			let goods_id = this.$route.query.goods_id
			console.log(goods_id)
			this.goods_id = goods_id
			this.$store.dispatch('user/vuexXq', goods_id)
				.then(e => {
					this.xq = e.data.data.imgList
					this.xqy = e.data.data
					this.id = e.data.data.goods_id
					this.message = e.data.data.goods_content
					// this.collectList = JSON.parse(localStorage.getItem('collList' + userInfo.member_id))
					// this.collectList.map((v) => {
					// 	if (v.goods_id == this.xqy.goods_id) {
					// 		this.star = false
					// 	}
					// })
					this.collectList.map((v, k) => {
						if (v.goods_id == this.xqy.goods_id) {
							this.star = false
						}
					})
					console.log(e.data.data.imgList)
					// console.log(e.data.data.goods_content)
					console.log(e.data.data, '详情页')
					this.click1()
				})
			this.$store.dispatch('user/vuexUrl', '地址')
				.then(e => {
					this.url = e
					console.log(e)
				})
		},

		mounted() {
			// const userInfo = JSON.parse(localStorage.getItem('login'))
			// if (JSON.parse(localStorage.getItem('collList' + userInfo.member_id))) {
			// 	this.collArr = JSON.parse(localStorage.getItem('collList' + userInfo.member_id))
			// }
		},

		methods: {
			onChange(index) {
				this.current = index;
			},
			click1() {
				this.message = this.escapeHtml(this.message)
			},
			escapeHtml(str) {
				var arrEntities = {
					'lt': '<',
					'gt': '>',
					'nbsp': ' ',
					'amp': '&',
					'quot': '"'
				};
				return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
					return arrEntities[t];
				});
			},
			addcart() {
				const userInfo = JSON.parse(localStorage.getItem('login'))
				console.log(userInfo)
				this.xqy.member_id = userInfo.member_id
				this.$store.dispatch('user/vuexAddCart', this.xqy)
					.then(e => {
						console.log(e)
						Toast.success('添加购物车成功');
					})
				console.log(this.xqy, '详情页')
			},
			goback() {
				this.$router.go(-1)
			},
			gobottom() {
				this.show = true
			},
			// collect(id) {
			// 	const userInfo = JSON.parse(localStorage.getItem('login'))
			// 	console.log(userInfo.member_id, 888)
			// 	if (this.star == false) {
			// 		this.star = true
			// 		this.collectList.map((v, k) => {
			// 			if (this.id == v.goods_id) {
			// 				this.collectList.splice(k, 1)
			// 			}
			// 		})
			// 		localStorage.setItem('collList' + userInfo.member_id, JSON.stringify(this.collectList))
			// 	} else {
			// 		this.star = false
			// 		if (this.collArr.indexOf(id) === -1) {
			// 			this.xqy.star = false
			// 			this.collArr.push(this.xqy)
			// 			localStorage.setItem('collList' + userInfo.member_id, JSON.stringify(this.collArr))
			// 		}
			// 	}
			// }
			collect() {
				this.star = !this.star
				console.log(this.collectList, 555)
				let collectArr = this.collectList
				let flag = 0
				collectArr.map((v, k) => {
					if (v.goods_id == this.xqy.goods_id) {
						collectArr.splice(k, 1)
						this.$store.dispatch('ShopGoods/DelCollect', collectArr)
						flag = 1
					}
				})
				if (flag != 1) {
					this.$store.dispatch('ShopGoods/AddCollect', this.xqy)
				}
			}
		}
	}
</script>
<style>
	.custom-indicator {
		position: absolute;
		right: 5px;
		bottom: 5px;
		padding: 2px 5px;
		font-size: 12px;
		background: rgba(0, 0, 0, 0.1);
	}

	.fd {
		text-align: left;
		font-size: 0.5rem;
	}

	h1 {
		display: none;
	}

	.fd img {
		width: 100%;

	}

	.sales {
		display: flex;
		flex-wrap: wrap;
		font-size: 0.3rem;
		justify-content: space-between;
		line-height: 4vh;
	}

	.name {
		text-align: left;
		font-weight: bold;
		font-size: 0.4rem;
	}

	.shop_detail {
		font-size: 0.3rem;
		color: #999999;
		text-align: left;
		line-height: 4vh;
	}

	#contents {
		font-size: 0.4rem;
		height: 5vh;
	}

	#tan img {
		width: 25%;
		height: 4vh;
	}
</style>
